<template>
  <div class="new_auction_detail">
    <c-title :hide="false" :text="'拍品详情'"></c-title>
    <div class="goodimg" v-if="info.has_one_goods">
      <img :src="info.has_one_goods.thumb" alt="" />
    </div>
    <div class="good_detail">
      <div class="countBox" :style="{ 'background-image': diyUrl('bgline.png', false) }">
        <div class="countBox_l">
          <img class="clockImg" :src="diyUrl('icon_time@2x.png')" alt="" />
          <div class="countBox_txt">{{info.running_status == 2 ? "已结束" : info.running_status == 1?"结束倒计时：":"开拍倒计时："}}</div>
        </div>
        <div class="countBox_r" v-if="info.running_status != 2">
          <van-count-down :time="setTime(info)"> </van-count-down>
        </div>
      </div>
      <div class="good_title" v-if="info.has_one_goods">{{ info.has_one_goods.title }}</div>
      <div class="new_price_txt">
        最新落槌价：
        <div class="small">{{ $i18n.t("money") }}</div>
        <div class="price_txt">{{ info.now_amount }}</div>
      </div>
      <div class="goods_new_Day">
        <div class="goods_new_Day_cl" v-for="(dateInof, index) in info.increase_log" :key="index">
          <div class="line_date">{{ dateInof.date }}</div>
          <div class="line_price">{{ $i18n.t("money") }}{{ dateInof.after_amount }}</div>
        </div>
      </div>
      <div class="endTime">结束时间：{{ timestampToTime(info.end_second) }}</div>
      <div class="detailBox">
        <div class="detailBox_title">拍品详情</div>
        <div class="detail_cell">
          <div class="cellBox">
            <div class="line" v-show="info.show_stock">数量：{{ info.show_stock }}</div>
          </div>
          <div class="cellBox">
            <div class="line">起始价：{{ info.min_amount }}</div>
            <div class="line">拍价递增比：{{ info.increase_percent }}%</div>
          </div>
          <div class="cellBox">
            <div class="line">提货价：{{ info.max_amount }}</div>
            <div class="line">市场价：{{ info.market_amount }}</div>
          </div>
          <div class="cellBox" v-if="info.pay_desc">
            <div class="line">付款时间：{{ info.pay_desc }}</div>
          </div>
          <div class="cellBox" v-if="info.param_desc">
            <div class="line">参数：{{ info.param_desc }}</div>
          </div>
        </div>
      </div>
      <div class="tabBox">
        <van-tabs v-model="active" line-width="24px" title-active-color="#126F46" color="#126F46">
          <van-tab title="拍品介绍" :title-style="active == '0' ? 'color:#126F46;font-weight: bold;font-size: 1.13rem;' : 'color:#000000;font-size: 1rem;font-weight: 400;'">
            <div v-html="auctionConten" class="contenBox"></div>
          </van-tab>
          <van-tab title="拍品图" :title-style="active == '1' ? 'color:#126F46;font-weight: bold;font-size: 1.13rem;' : 'color:#000000;font-size: 1rem;font-weight: 400;'">
            <div class="imgList" v-if="info.has_one_goods">
              <img v-if="info.has_one_goods.thumb" :src="info.has_one_goods.thumb" alt="" />
              <template v-for="(item, index) in info.has_one_goods.thumb_url">
                <div :key="index">
                  <img :src="item" alt="" />
                </div>
              </template>
            </div>
          </van-tab>
          <van-tab title="上拍方信息" :title-style="active == '2' ? 'color:#126F46;font-weight: bold;font-size: 1.13rem;' : 'color:#000000;font-size: 1rem;font-weight: 400;'">
            <div class="auction-info">
              <van-cell :border="false" title="上拍方" v-if="info.saler_desc" :value="info.saler_desc" title-class="cell_l" value-class="cell_r" />
              <van-cell :border="false" title="联系人" v-if="info.saler_name" :value="info.saler_name" title-class="cell_l" value-class="cell_r" />
              <van-cell :border="false" title="联系电话" v-if="info.saler_mobile" :value="info.saler_mobile" title-class="cell_l" value-class="cell_r" />
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <div class="btn set-pc-style">
      <div class="btn_box">
        <div class="btn_l" :class="info.usable_auction_goods_count == 0 ? 'default' : ''" @click="popupShow_noJoin">委拍</div>
        <div class="btn_r" :class="info.running_status == 1 ? '' : 'default'" @click="popupShowJoin">参拍</div>
      </div>
    </div>
    <optionPopup :showPopup="popupShow" @closePopup="closePopup" :isJoin="isJoin" :item="info" @onUpdate="getData"></optionPopup>
  </div>
</template>
<script>
import optionPopup from "./components/optionPopup";
export default {
  data() {
    return {
      active: 0,
      auctionConten: "",
      popupShow: false,
      isJoin: false,
      info: [],
      hostUrl: ""
    };
  },
  components: { optionPopup },
  activated() {
    this.getData();
    this.hostUrl = process.env.NODE_ENV == "development" ? "dev4.yunzmall.com" : window.location.host;
  },
  computed: {
    diyUrl(url, key = true) {
      return function(url, key = true) {
        if (key) {
          return `https://${this.hostUrl}/plugins/new-auction/assets/image/${url}`;
        } else {
          return `url(https://${this.hostUrl}/plugins/new-auction/assets/image/${url})`;
        }
      };
    },
    setTime(item) {
      return function(item) {
        let nowTime = new Date().getTime();
        let rtime = "";
        if (item.running_status == 0) {
          // 未开始
          rtime = (item.start_second * 1000 - nowTime).toFixed(0);
          console.log(rtime, "wwwwwwwwww", item.start_second, nowTime);
        } else if (item.running_status == 1) {
          // 进行中
          rtime = (item.end_second * 1000 - nowTime).toFixed(0);
        }
        return rtime;
      };
    }
  },
  methods: {
    closePopup() {
      this.popupShow = false;
    },
    popupShowJoin() {
      if (this.info.running_status != 1) return;
      this.popupShow = true;
      this.isJoin = true;
    },
    popupShow_noJoin() {
      if (this.info.usable_auction_goods_count == 0) return;
      this.popupShow = true;
      this.isJoin = false;
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.activity.detail", { id: this.$route.params.id }, "");
      if (result) {
        this.info = data;
        this.auctionConten = data.has_one_goods.content;
      } else {
        this.$toast(msg);
      }
    },
    timestampToTime(timestamp) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      let D = (date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate()) + " ";
      let h = (date.getHours() < 10 ? "0" + date.getHours() + ":" : date.getHours()) + ":";
      let m = date.getMinutes() < 10 ? "0" + date.getMinutes() + ":" : date.getMinutes() + ":";
      let s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }
  }
};
</script>
<style>
.contenBox img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
  margin-top: 0.63rem;
}
</style>
<style lang="scss" scoped>
.imgList {
  margin-top: 0.63rem;
  img {
    width: 100%;
    height: auto;
  }
}
.contenBox {
  margin-top: 0.5rem;
}
.new_auction_detail {
  box-sizing: border-box;
  .good_detail {
    position: relative;
    margin-top: -1rem;
    background: linear-gradient(180deg, #f7f7f7 0%, #ededed 100%);
    border-radius: 1.25rem;
    padding: 0.94rem;
    box-sizing: border-box;
    padding-bottom: 5rem;
    .detailBox {
      padding: 0.94rem;
      margin: 0.94rem 0;
      background: #ffffff;
      border-radius: 0.31rem;
      .detailBox_title {
        font-weight: bold;
        font-size: 1rem;
        color: #000000;
        text-align: left;
      }
      .detail_cell {
        display: flex;
        flex-direction: column;
        .cellBox {
          display: flex;
          justify-content: space-between;
          margin-top: 0.75rem;
          .line {
            flex: 1;
            text-align: left;
            font-weight: 400;
            font-size: 0.81rem;
            color: #000000;
          }
        }
      }
    }
    .endTime {
      font-weight: 400;
      font-size: 0.81rem;
      color: #000000;
      text-align: left;
    }
    .goods_new_Day {
      height: 4.41rem;
      background: #ffffff;
      border-radius: 0.31rem;
      display: flex;
      align-items: center;
      margin: 0.62rem 0;
      .goods_new_Day_cl {
        width: calc(100% / 3);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .line_date {
          font-weight: 400;
          font-size: 0.81rem;
          color: #000000;
          margin-bottom: 0.5rem;
        }
        .line_price {
          font-weight: bold;
          font-size: 0.88rem;
          color: #eb5851;
        }
      }
    }
    .new_price_txt {
      font-weight: 400;
      font-size: 0.75rem;
      color: #6a6a6a;
      display: flex;
      line-height: 1.8rem;
      .small {
        font-size: 0.75rem;
        color: #eb5851;
      }
      .price_txt {
        font-weight: bold;
        font-size: 1.56rem;
        color: #eb5851;
        line-height: 1.4rem;
      }
    }
    .good_title {
      font-weight: bold;
      font-size: 1rem;
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0.63rem 0;
    }
    .countBox {
      width: 17.91rem;
      height: 1.63rem;
      display: flex;
      align-items: center;
      padding-left: 0.44rem;
      box-sizing: border-box;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: 100%;
      .countBox_r {
        display: flex;
        align-items: center;
        margin-left: 1.56rem;
      }
      .countBox_l {
        font-weight: bold;
        font-size: 0.88rem;
        color: #ffffff;
        display: flex;
        align-items: center;
        .clockImg {
          width: 0.94rem;
          height: 0.94rem;
        }
      }
    }
  }
  .goodimg {
    width: 100%;
    height: auto;
    img {
      width: 100%;
    }
  }
}
.tabBox {
  margin-top: 0.63rem;
  background: #ffffff;
  border-radius: 0.5rem;
  overflow: hidden;
  .auction-info {
    .cell_l {
      font-size: 0.88rem;
      color: #3b3b4a;
      text-align: left;
    }
    .cell_r {
      font-weight: 500;
      font-size: 0.88rem;
      color: #00001c;
      text-align: right;
    }
  }
}
.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
  padding: 0.63rem 0.94rem;
  box-sizing: border-box;
  .btn_box {
    display: flex;
    justify-content: space-between;
    height: 2.75rem;
    width: 100%;
    .btn_l {
      font-weight: bold;
      font-size: 1rem;
      color: #ffffff;
      text-align: center;
      line-height: 2.75rem;
      flex: 1;
      background: #e49d4d;
      border-radius: 1.56rem 0rem 0rem 1.56rem;
    }
    .btn_r {
      font-weight: bold;
      font-size: 1rem;
      color: #ffffff;
      text-align: center;
      line-height: 2.75rem;
      flex: 1;
      background: #d76153;
      border-radius: 0rem 1.56rem 1.56rem 0rem;
    }
    .default {
      background: #aaaab3;
      color: #fff;
    }
  }
}
</style>
